// Vue.component('name',{
//   template:""
// })
<template>
  <div id="app">
    <h1>状态更新</h1>
    app.vue
    <div>我的名字 {{ myname }}</div>
    <button @click="doClick">点击</button>
    <input type="text" v-model="mytext" /><button @click="doAdd">添加</button>
    <ul>
      <li v-for="(item, index) in datalist" :key="item">
        {{ index }}________{{ item }}
      </li>
    </ul>

    <h1>抽屉效果</h1>
    <navbar></navbar>
    <siderbar></siderbar>

    <hr />

    <router-link to="/film">film</router-link>
    <router-link to="/center">center</router-link>
    <router-link to="/cinema">cinema</router-link>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from "vue";
import navbar from "./components/Navbar";
import siderbar from "./components/Siderbar";
// 注册全局组件的
Vue.component("navbar", navbar);

//  ES6模块导出
export default {
  data() {
    return {
      myname: "jack",
      mytext: "",
      datalist: [],
    };
  },
  components: {
    siderbar: siderbar,
  },
  methods: {
    doClick() {
      this.myname = "铁锤妹妹";
    },
    doAdd() {
      console.log(this.mytext);
      this.datalist.push(this.mytext);
      this.mytext = "";
    },
  },
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
